<template>
    <div>
        <el-card>
            <!-- 过滤框 -->
<!--            <el-select v-model="value" style="float:left" @change="changeDept" filterable placeholder="选择部门">-->
<!--                <el-option v-for="(item, index) in deptOption" :key="index" :label="item.name" :value="item.name">-->
<!--                </el-option>-->
<!--            </el-select>-->
            <div style="margin-left:10px">
                <el-input style="float:left;width:200px;margin-left:10px" v-model="searchByName" class='searchByName'
                    placeholder="请输入人员名称关键字" />
                <!-- <i class="el-icon-search"></i> -->
                <el-button type="primary" @click="searchByNameFun" style="margin-left: 20px;">查询</el-button>
                <el-button type="primary" @click="addUser" style="margin-left: 20px;">添加人员</el-button>
            </div>
            <!-- 表格 -->
            <el-table :data="userList" stripe style="width: 95%">
                <!-- <el-table-column type="index" label="#" width="80px"> -->
                <!-- </el-table-column> -->
                <el-table-column label="编号" width="120" prop="id">
                </el-table-column>
                <el-table-column label="账号" width="120" prop="username">
                </el-table-column>
                <el-table-column label="姓名" width="170" prop="name">
                </el-table-column>
              <el-table-column label="性别" width="170" prop="sex">
              </el-table-column>

               <el-table-column label="身份" width="170" prop="sex">
                   <template slot-scope="scope">
                       {{ scope.row.access === 0 ? '普通会员' : '' }}
                       {{ scope.row.access === 1 ? '景区商家' : '' }}
                       {{ scope.row.access === 2 ? '超级管理员' : '' }}
                   </template>
               </el-table-column>
                <el-table-column label="注册时间" width="170" prop="createTime">
                </el-table-column>
                <el-table-column label="操作" width="350">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="update(scope.row)">编辑</el-button>
                        <el-button type="success" size="mini" @click="detail('修改管理信息', scope.row.id)">详情</el-button>
                        <template>
                            <el-popconfirm @confirm="deleteBtn(scope.row)" title="确定要删除？">
                                <el-button style="margin-left:10px" slot="reference" class="deleteBtn" type="danger"
                                    size="mini">删除</el-button>
                            </el-popconfirm>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row>
                <el-col :span="12" :offset="12">
                    <el-pagination layout="total,prev, pager, next,jumper,sizes " background small prev-text="上一页"
                        next-text="下一页" :total="total" :page-size="pageSize" :current-page="pageNow"
                        :page-sizes="[5, 10, 50]" style="margin:15px 0px" @current-change="findPage"
                        @size-change="findSize">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>

        <el-dialog title="个人信息展示" :visible.sync="userDetailShow">
            <!-- <div>物资类型展示</div> -->
            <!-- <UserDetailVue></UserDetailVue>    -->
            <div>
                <el-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
                    <template slot="extra">
                        <el-button type="primary" size="small" @click="resetPassword(userDetail)">重置密码</el-button>
                    </template>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-user"></i>
                            账号
                        </template>
                        {{ userDetail.username }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-mobile-phone"></i>
                            手机号
                        </template>
                        {{ userDetail.phone }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-tickets"></i>
                            姓名
                        </template>
                        <el-tag size="small">{{ userDetail.name }}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            注册时间
                        </template>
                        {{ userDetail.createTime }}
                    </el-descriptions-item>
                    <el-descriptions-item v-if="userDetail.access === 0">
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            权限
                        </template>
                        普通会员
                    </el-descriptions-item>

                    <el-descriptions-item v-if="userDetail.access === 1">
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                           景区商家
                        </template>

                    </el-descriptions-item>

                    <el-descriptions-item v-if="userDetail.access === 2">
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            权限
                        </template>
                        超级管理员
                    </el-descriptions-item>

                    <el-descriptions-item v-if="userDetail.state === 1">
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            状态
                        </template>
                        正常
                    </el-descriptions-item>

                    <el-descriptions-item v-if="userDetail.state === 0">
                        <template slot="label">
                            <i class="el-icon-office-building"></i>
                            状态
                        </template>
                        被禁用
                    </el-descriptions-item>
                </el-descriptions>
            </div>

        </el-dialog>

        <!-- 添加或者修改的表单 -->
        <el-dialog title="添加或修改人员信息" :visible.sync="addOrUpdateFormShow">
            <!-- <div>物资类型展示</div> -->
            <div>
                <!-- :rules="rules"校验 -->
                <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" hide-required-asterisk
                    label-suffix=":" class="demo-ruleForm">

                    <el-form-item label="账号" prop="username">
                        <el-input v-model="addForm.username" style="width: 30%"></el-input>
                    </el-form-item>

                  <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password" style="width: 30%"></el-input>
                  </el-form-item>


                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="addForm.name" style="width: 30%"></el-input>
                    </el-form-item>

                  <el-form-item label="性别" prop="name">
                    <el-radio v-model="addForm.sex" label="男">男</el-radio>
                    <el-radio v-model="addForm.sex" label="女">女</el-radio>
                  </el-form-item>

                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="addForm.phone" style="width: 20%"></el-input>
                    </el-form-item>

                    <el-form-item label="权限" prop="access">
                        <el-select v-model="addForm.access" placeholder="请选择角色权限">
                            <el-option v-for="(item, index) in accessOption" :key="index" :label="item.name"
                                :value="item.id">
                            </el-option>

                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('addForm')">提交</el-button>
                        <el-button @click="resetForm('addForm')">重置</el-button>

                    </el-form-item>
                </el-form>
            </div>

        </el-dialog>


    </div>
</template>

<script>
// import UserDetailVue from '@/components/UserDetail.vue'
export default {
    name: 'user',
    components: {
        // UserDetailVue
    },
    data() {
        return {
            //权限选择
            accessOption: [
                {
                    id: 0,
                    name: '会员'
                },
                {
                    id: 1,
                    name: '景区商家'
                },
                {
                    id: 2,
                    name: '超级管理员'
                }
            ],

            //添加表单
            addForm: {
              id: 0,
              sex: ''
            },
            size: '',
            addOrUpdateFormShow: false,
            // 详情失败
            userDetailShow: false,
            // 部门下拉选择值的记录
            value: '',
            searchByName: "",
            searchByDept: "",
            pageNow: 1,
            pageSize: 5,
            total: 0,
            userDetail: {},
            deptOption: [
                {
                    id: 1,
                    name: '测试',
                },
                {
                    id: 2,
                    name: '开发',
                }
            ],
            rules: {
                name: [
                    { required: true, message: '请输入用户姓名', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请设置用户登录账号', trigger: 'blur' },
                  { min: 2, max: 10, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                access: [
                    { required: true, message: '请选择权限', trigger: 'blur' },
                ],
            },
            userList: [
                {
                    id: 1,
                    username: 'sakura',
                    name: '吕晨',
                    dept: '开发部门',
                    phone: '12342',
                    state: 1,
                    registeTime: '2023-4-21',

                }
            ],
        };
    },

    mounted() {
        // this.findPage(1)
        this.searchByNameFun()
        // this.getDeptList()
    },

    methods: {
        //提交添加或者修改的表单
        submitForm(formName) {
            // console.log(this.addForm)
          this.$refs[formName].validate(async (valid) => {
            if (valid) {
            this.$http.post("/user/saveOrUpdate", this.addForm).then(res => {
                // console.log(res.data)
                if (res.data.status) {
                  this.$message.success(res.data.data);
                  this.searchByNameFun()
                } else {
                    this.$message.error(res.msg);
                }
            })
            this.searchByNameFun()
            this.addOrUpdateFormShow = false
            this.addForm = {
              id: 0,
            }
            } else {

              return false;
            }
          });
        },

        //重置添加表单
        resetForm(formName) {
            // console.log(formName)
            this.$refs[formName].resetFields();
        },

        //重置密码
        resetPassword(userDetail) {
            const user = JSON.parse(window.sessionStorage.getItem("user"))
            if (user.username === 'admin' | user.access < userDetail.access) {
                this.$http.put("/user/resetPwd/" + userDetail.id).then(res => {
                    // console.log(res.data)
                    if (res.data.status) {
                        this.$message.success(res.data.data);
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                return
            }
            this.$message.error("您无权重置管理员密码")
            // return
        },

        addUser() {
            this.addOrUpdateFormShow = true
            // console.log(this.addForm)
        },

        update(row) {
            // console.log(row)
            this.addForm = row
            // console.log(this.deptOption)
            // console.log(this.accessOption)
            const user = JSON.parse(window.sessionStorage.getItem("user"))
            if (user.username === 'admin' | user.access < row.access) {
                this.addOrUpdateFormShow = true
                this.searchByNameFun()
                return
            }
            this.$message.error("您无权更改管理员的信息")

        },

        deleteBtn(row) {
            // console.log("删除"+id)
            const user = JSON.parse(window.sessionStorage.getItem("user"))
            if (user.username === 'admin' | user.access < row.access) {
                this.$http.delete("/user/delete/" + row.id).then(res => {
                    // console.log(res.data)
                    if (res.data.status) {
                        this.$message.success(res.data.data);
                        this.searchByNameFun()
                    } else {
                        this.$message.error(res.msg);
                    }
                    // console.log(this.userDetail)
                });
                return
            }
            this.$message.error("您无权删除管理员")
        },

        //用户详情
        detail(value, id) {
            // console.log(value,id)
            this.$http.get("/user/detail/" + id).then(res => {
                console.log(res.data)
                this.userDetail = res.data.data;
                // console.log(this.userDetail)
            });
            this.userDetailShow = true
        },


        // 根据部门的关键字查询
        searchByNameFun() {
            // console.log(this.searchByName)
            // console.log(this.searchByDept)
            // this.pageNow = 1
            // 页面变动之后需要查询相同种类的变动页码的数据
            this.$http.get("/user/list/" + this.pageNow + "/" + this.pageSize + "?searchKey=" + this.searchByName)
                .then(res => {
                    this.userList = res.data.data.records;
                    this.total = res.data.data.total
                    // console.log(res.data)
                });

        },
        //管理员状态改变
        async stateChange(state, row) {
            // console.log(row)
            //发起请求根据 id 修改用户的状态
            // console.log(user.access)
            // console.log(row.access)
            const user = JSON.parse(window.sessionStorage.getItem("user"))
            if (row.username === 'admin') {
                this.$message.error("超级管理员无法被禁用")
                return
            }
            if (user.access >= row.access) {
                this.$message.error("您无权更改管理员的状态")
                return
            }

            const { data: res } = await this.$http.put(`/user/changeState/${row.id}/${state}`)
            if (res.status) {
                this.$message.success(res.data)
                this.searchByNameFun()
            }
            else {
                this.$message.error(res.msg)
            }
            this.findPage(this.pageNow)
        },
        //改变页码数据量大小
        findSize(size) {
            this.pageSize = size
            this.searchByNameFun()
        },
        findPage(page) {

            this.pageNow = page
            this.searchByNameFun()

        },
    },
};
</script>

<style lang="less" scoped></style>
